<template>

	<div class="container">
		<audio loop="true" :src="music_url" ref="musicAudio" preload="auto">
		</audio>
		<Header></Header>
		<router-view v-slot="{ Component }">
			<keep-alive>
				<component :is="Component" v-if="$route.meta.keepAlive" />
			</keep-alive>
			<component :is="Component" v-if="!$route.meta.keepAlive" />
		</router-view>
	</div>

</template>
<script setup lang="ts">
import Header from "@/components/Header/Header.vue"
import { onMounted, ref, watch, nextTick, computed } from "vue";
import { AppStore } from "./store";
const base_url = import.meta.env.VITE_APP_URL
const musicAudio = ref()
const store = AppStore()
const music_url = computed(() => {
	if (!store.other_music.url_radio.startsWith('http://')) {
		console.log(store.other_music.url_radio)
		return base_url + store.other_music.url_radio

	} else {
		console.log(store.other_music.url_radio)
		return store.other_music.url_radio
	}
})
watch([() => store.isplay, () => store.other_music.url_radio], () => {
	nextTick(() => {
		if (store.isplay) {

			musicAudio.value.play()
		} else {
			musicAudio.value.pause()
		}
	})
}, { deep: true })

onMounted(() => {
})
</script>
<style>
* {
	font-family: '幼圆';
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.container {
	background: url('http://img.netbian.com/file/2024/0503/010841F4Lw2.jpg') no-repeat;
	background-size: 100vw 100vh;
	background-attachment: fixed;
	height: 100vh;
	overflow: hidden;
}


::-webkit-scrollbar {
	width: 5px;
	height: 8px;

}

::-webkit-scrollbar-button {
	display: none;
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(orange, skyblue, black, skyblue, orange);
	border-radius: 4px;
}

::-webkit-scrollbar-corner {
	display: none;
}

::-webkit-resizer {
	display: none;
}
</style>
